<template>
	<div class="div1">
		<el-backtop target=".div1"></el-backtop>
		<div class="beijBox">
			<!-- 头部 -->

			<Head :data="searchList" style="background: #fff;"></Head>
			<div class="daohang" style="height: 65px;">
				{{ goodsTypeName }} > {{ goodsBrandName }}
			</div>
			<!-- 中部 -->
			<div class="quMargin qupadding pailie">
				<!-- 左边 -->
				<div class="imgs box">
					<!-- <img src="../../assets/foot/app.png" class="imgTop " /> -->

					<div class="imgTopBox">
						<el-image class="imgTop" :src="imgUrl" :preview-src-list="goodsDetails.img">
						</el-image>
					</div>
					<div class="imgList">
						<div v-for="(ietm, index) in goodsDetails.img" :key="index" class="imgNameBox">
							<img class="imgName" :src="ietm" @click="imgBtn(ietm)" v-if="index < 4" />
						</div>
					</div>
					<div v-if="title != '拼团购'" style="margin-top: 5px" @click="setCheck()">
						<i v-if="isCheck" class="el-icon-star-off"></i>
						<i style="color: red" v-if="!isCheck" class="el-icon-star-on"></i>
						{{ $t('goodsDet.CollectGoods') }}
					</div>
				</div>
				<!-- <div class="oneRight box">
				<div class="titleR">{{ goodsDetails.title }}</div>
				<div class="moneyR">
					<span class="leftR">到手价</span>
					<span class="xiao">¥</span>
					<span class="xianjiaR" v-if="title != '拼团购'">{{
						userId ? goodsDetails.memberPrice : goodsDetails.price
					}}</span>
					<span class="xianjiaR" v-else>{{
						goodsDetails.memberPrice
					}}</span>
					<span class="xiao yuanjia"
						>¥ {{ goodsDetails.originalPrice }}</span
					>
				</div>
				<div class="guige">
					<div v-if = "title != '拼团购'">
						<div class = "guigeT guigeL">分享赚</div>
						<div class = "guigeT guigeR"><span class = "">¥</span>{{ shengji }}</div>
					</div>
					<div>
						<div class="guigeT guigeL">销 量</div>
						<div v-if="title != '拼团购'" class="guigeT guigeR">
							月销{{ goodsDetails.sales }}
						</div>
						<div v-else class="guigeT guigeR">
							月销{{ goodsDetails.number }}
						</div>
					</div>
										<div>
											<div class = "guigeT guigeL">配 送</div>
											<div class = "guigeT guigeR">
												<el-cascader style = "width:300px" size = "large" :options = "options" ref = "cascaderAddr"
															 v-model = "storeAddress" :placeholder = "storeAddre" @change = "handleChange55"
															 :value = "storeAddre">
												</el-cascader>
											</div>
										</div>
				</div>
				<div class="guige guige2">
					<div v-if="goodsDetails.attr && goodsDetails.attr.length > 0">
						<div v-for="(item, index) in goodsDetails.attr[0].attrValue">
							<div class="guigeT guigeL">{{ item.value }}</div>
							<div class="guigeT guigeR">
								<div
									class="guigelist"
									v-for="(item1, index1) in item.detail"
									:key="index1"
									:class="
										item.goodsId == index &&
										item.attrId == index1 &&
										item1.state != ''
											? 'active1'
											: ''
									"
									@click="guigeBtn(item1, index, index1)"
								>
									{{ item1.name }}
								</div>
							</div>
						</div>
					</div>

					<div>
						<div class="guigeT guigeL">数 量</div>
						<div class="guigeT guigeR">
							<el-input-number
								size="mini"
								v-model="num"
								@change="handleChange"
								:min="1"
								:max="10"
								label="描述文字"
							>
							</el-input-number>
						</div>
					</div>
				</div>
				<div class="btns">
					<button
						v-if="title != '拼团购'"
						class="goumai"
						@click="onClick()"
					>
						立即购买
					</button>
					<button
						v-if="title != '拼团购'"
						class="jiagou"
						@click="onCars()"
					>
						加入购物车
					</button>
					<button
						v-if="title == '拼团购'"
						class="goumai"
						@click="onClick()"
					>
						立即开团
					</button>
				</div>
			</div> -->
				<!-- 新中间 -->
				<div class="centerBoxShang">
					<div class="pinpai">{{ $t('goodsDet.brand') }}{{ goodsBrandName }}</div>
					<div class="pinpaiName">{{ goodsDetails.title }}</div>
					<div class="pinjiaBox">
						<div class="pingfen">{{ GradeObj.count1 }}<el-rate disabled v-model="GradeObj.count1"></el-rate>
							<span class="xiala"><i class="el-icon-arrow-down"></i></span> </div>
						<div class="GoodPin">{{ GradeObj.count }} {{ $t('goodsDet.comment') }} | {{ GradeObj.count2 }}
							{{ $t('goodsDet.favourable') }}
						</div>
					</div>
					<div class="xiaoliang" v-if="title != '拼团购'">{{ $t('goodsDet.MonthlySales') }} {{ goodsDetails.sales
						}}</div>
					<div class="xiaoliang" v-else>{{ $t('goodsDet.MonthlySales') }} {{ goodsDetails.number }}</div>
					<div class="huixianBox">
						<div class="huixian"></div>
					</div>
					<div class="jiageBox">
						<span class="qian" v-if="title != '拼团购'">{{ userId ? getProportion(goodsDetails.memberPrice) :
							getProportion(goodsDetails.price) }}</span>
						<span class="qian" v-else>{{ getProportion(goodsDetails.memberPrice) }}</span>
						<span class="bizhong">{{ DollarSignValue }}</span>
						<span class="shanchuXian">（{{ getProportion(goodsDetails.originalPrice)
							}}{{ DollarSignValue }}/{{ $t('goodsDet.total') }}）</span>
						<span class="jiangjialv" v-if="goodsDetails.originalPrice">{{ discount }}</span>
						<!-- <span class="jiangjialv" v-if="goodsDetails.originalPrice">{{ calculateDiscount() }}</span> -->
						<span class="jiangjialv" v-else>0%</span>
					</div>
					<!-- 颜色,尺码,款式 -->
					<div v-if="goodsDetails.attr && goodsDetails.attr.length > 0">
						<div v-for="(item, index) in goodsDetails.attr[0].attrValue">
							<div class="guigeT guigeL">{{ item.value }}</div>
							<div class="guigeT guigeR">
								<div class="guigelist" v-for="(item1, index1) in item.detail" :key="index1" :class="item.goodsId == index &&
									item.attrId == index1 &&
									item1.state != ''
									? 'active1'
									: ''
									" @click="guigeBtn(item1, index, index1)">
									{{ item1.name }}
								</div>
							</div>
						</div>
					</div>
					<!-- 新尺寸 -->
					<!-- <div class="sizeBox">
						<div>尺寸：</div>
						<el-select v-model="value" placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div> -->
					<!-- 新颜色 -->
					<!-- <div>
						<div class="yanse">颜色 : 绿色</div>
						<div class="yanseBoxFang">
							<div class="baiseFang fang"></div>
							<div class="luseFang fang"></div>
							<div class="hongseFang fang"></div>
						</div>
					</div> -->
					<div class="numBox">
						<div>{{ $t('quantity') }}：</div>
						<div><el-input-number v-model="num" @change="handleChange" size="small" :min="1" :max="10"
								:label="$t('goodsDet.Descriptive')"></el-input-number></div>
					</div>
					<!-- 是否有货 -->
					<!-- <div class="ItYouHuoBox">
						<div class="youhuoBox">
							<div class="touYou">{{ $t('goodsDet.spotGoods') }}</div>
							<div class="youhuoShnag">
								<div class="zuoImage">
									<img :src="imgUrl" alt="" class="shangImage">
								</div>
								<div class="youImage">
									<div class="shangName">CHICWIND 绿色</div>
									<div>{{ getProportion(566) }}{{ DollarSignValue }}</div>
								</div>
							</div>
						</div>
						<div class="youhuoBox">
							<div class="touYou huiseKuang">{{ $t('goodsDet.NeedToOrder') }}</div>
							<div class="youhuoShnag huise">
								<div class="zuoImage">
									<img :src="imgUrl" alt="" class="shangImage">
								</div>
								<div class="youImage">
									<div class="shangName">CHICWIND 白色</div>
									<div>{{ getProportion(566) }}{{ DollarSignValue }}</div>
								</div>
							</div>
						</div>
					</div>
					<div></div> -->
				</div>
				<!-- 新右边 -->
				<!-- <div class="rightBox">
					<div class="zongjin">{{ $t('goodsDet.aggregate') }}</div>
					<div class="juzhong">
						<span class="qian">{{ getProportion(566) }}</span>
						<span class="bizhong wangsgang">{{ DollarSignValue }}</span>
					</div>
					<div class="juzhong">（{{ DollarSignValue }}{{ getProportion(955) }}/{{ $t('goodsDet.include') }}）
					</div>
					<div class="dizhi1Box">
						<div class="dizhi">
							<i class="el-icon-location-information"></i>
							china
							<i class="el-icon-arrow-down"></i>
						</div>
					</div>
					<div class="huibeijin">
						<div class="shuishouText">
							<div class="shuiTxt">{{ $t('goodsDet.taxation') }}</div>
							<div>{{ $t('goodsDet.Taxable') }}&nbsp;<i class="el-icon-arrow-down"></i></div>
						</div>
						<div class="shuifei">
							{{ $t('goodsDet.Shipped') }}
							<span class="xiahuaX zitiLan">中国</span>
							{{ $t('goodsDet.TaxNeedsOf') }} <span class="zitiLan">{{ DollarSignValue }}{{
								getProportion(100) }}</span>
						</div>
						<div class="shuishouText maginTop27">
							<div class="shuiTxt">{{ $t('goodsDet.transport') }}</div>
							<div><i class="el-icon-plus"></i>&nbsp;{{ $t('goodsDet.address') }}</div>
						</div>
						<div class="shuifei">
							{{ $t('goodsDet.ThisLetter') }}
							<span class="xiahuaX zitiLan">{{ $t('goodsDet.MyAddress') }}</span>
							{{ $t('goodsDet.TaxNeedsOf') }} <span class="zitiLan">{{ DollarSignValue }}{{
								getProportion(80) }}</span>
						</div>
					</div>
					<div class="btnMai btnColorChen" @click="onCars">{{ $t('goodsDet.addToCart') }}</div>
					<div class="btnMai btnColorHei" @click="onClick">{{ $t('goodsDet.Immediate') }}</div>
				</div> -->
			</div>
			<!-- 产品详情 -->
			<div class="ProductDetailsBox">
				<div class="PdBiaoti">{{ $t('goodsDet.Product') }}</div>
				<!-- <div class="xiangQing">
					<p>凭借其经典的设计、实用的功能和无与伦比的舒适性——难怪Sportif“原创”弹力工装裤几乎是全球游艇上的制服！50多年来深受顾客喜爱，被称为世界上最好的划船短裤。30-40码有4英寸的内缝，42-46码有5.5英寸的内缝。由我们7.5盎司的。
					</p>
					<p>独创的弹力斜纹布独家7口袋设计，包括两个深前口袋，两个带按钮式翻盖口袋，
						两个带拉链的安全后袋右前袋内的额外口袋非常适合携带小型手机或小刀非卷式弹力腰带坚固的隧道式腰带环耐用的双层织物座椅扣板胯部双缝线接缝贯穿整个杆钉缝线加强应力区域以保证多年的使用4英寸内缝(尺寸30-40)或5.5英寸内缝(尺寸42-46)抗皱62聚酯/35棉/3氨纶混纺适合旅行，可直接从烘干机机洗进口
					</p>
				</div> -->
				<div class="oneC" v-html="goodsDetails.descrition"></div>
				<!-- 下拉 -->
				<!-- <div class="xialaGenDuo">v</div> -->
			</div>
			<!-- 评论 -->
			<div class="reviewsBox">
				<div class="PdBiaoti">{{ $t('goodsDet.comment') }}</div>
				<div class="reviewsDetailsBox">
					<!-- 左边 -->
					<div class="shujuBoxLeft">
						<!-- 卡片部分 -->
						<div class="cardBox">
							<!-- 上面 -->
							<div class="cardTop">
								<div class="cardCircularIcon"></div>
								<div class="logoTxt">{{ nickName }}</div>
								<div class="enterBtn">{{ $t('goodsDet.enter') }} <i class="el-icon-right"></i></div>
							</div>
							<!-- 灰色线 -->
							<div class="cardHuixian"></div>
							<!-- 下面 -->
							<div class="shujuliang">
								<div class="lieOne">
									<div>{{ $t('goodsDet.StoreRating') }}</div>
									<div>100</div>
								</div>
								<div class="lieOne">
									<div>{{ $t('goodsDet.Sales') }}</div>
									<div>{{ goodsDetails.sales }}</div>
								</div>
								<div class="lieOne">
									<div>{{ $t('goodsDet.member') }}</div>
									<div>5420</div>
								</div>
							</div>
						</div>
						<!-- 评分部分 -->
						<div class="reviewsNumberBox">
							<div class="pingTxt">{{ $t('goodsDet.CustomerReviews') }}</div>
							<div class="dafenBoxXing"><el-rate v-model="value" disabled show-score text-color="#ff9900"
									score-template="{value}">
								</el-rate>
								<span class="xingF">( 5 )</span>
							</div>
							<div class="Quanguo">
								{{ $t('goodsDet.together') }}{{ GradeObj.count }}{{ $t('goodsDet.strip') }}{{
									$t('goodsDet.comment') }}
							</div>
							<div class="xingshu">
								<div>5{{ $t('goodsDet.star') }}</div>
								<el-progress type="line" :percentage="getXing(GradeObj.count10)" :stroke-width="28"
									color="#e6a23c"></el-progress>
							</div>
							<div class="xingshu">
								<div>4{{ $t('goodsDet.star') }}</div>
								<el-progress type="line" :percentage="getXing(GradeObj.count10)" :stroke-width="28"
									color="#e6a23c"></el-progress>
							</div>
							<div class="xingshu">
								<div>3{{ $t('goodsDet.star') }}</div>
								<el-progress type="line" :percentage="getXing(GradeObj.count9)" :stroke-width="28"
									color="#e6a23c"></el-progress>
							</div>
							<div class="xingshu">
								<div>2{{ $t('goodsDet.star') }}</div>
								<el-progress type="line" :percentage="getXing(GradeObj.count7)" :stroke-width="28"
									color="#e6a23c"></el-progress>
							</div>
							<div class="xingshu">
								<div>1{{ $t('goodsDet.star') }}</div>
								<el-progress type="line" :percentage="getXing(GradeObj.count6)" :stroke-width="28"
									color="#e6a23c"></el-progress>
							</div>
						</div>
					</div>
					<!-- 右边 -->
					<div class="shujuBoxRight">
						<!-- <div class="ReviewsSay">顾客们说</div>
						<div class="zongjieReviews">顾客喜欢这双袜子的合适度、外观和舒适度。他们提到这双袜子非常合身，可爱又耐穿。一些人赞赏垫子
							不错。关于质量的看法褒贬不一。</div>
						<div class="tishiReviews">由客户评论文本生成</div>
						<div class="shaixuanReviews">选择以了解更多信息</div> -->
						<!-- <div class="duoxuanBox">
							<el-checkbox-group v-model="checkList">
								<el-checkbox label="合适"></el-checkbox>
								<el-divider direction="vertical"></el-divider>
								<el-checkbox label="舒适"></el-checkbox>
								<el-divider direction="vertical"></el-divider>
								<el-checkbox label="外观"></el-checkbox>
								<el-divider direction="vertical"></el-divider>
								<el-checkbox label="质量"></el-checkbox>
								<el-checkbox label="禁用" disabled></el-checkbox>
								<el-checkbox label="选中且禁用" disabled></el-checkbox>
							</el-checkbox-group>
						</div> -->
						<div class="pinglunImageBox">
							<div>{{ $t('goodsDet.CommentsOnDrawings') }}</div>
							<!-- <div>查看所有照片></div> -->
						</div>
						<!-- <div class="lunboImage">
							<el-carousel :interval="500000" arrow="always">
								<el-carousel-item v-for="item, index in lunboList" :key="index"
									:class="`lunboXianBox${index}`">

									<img :src="item.url" alt="">
								</el-carousel-item>
							</el-carousel>
						</div> -->
						<div class="pinlunPeopleBox" v-if="pinglunListsContent.length > 0">
							<div class="pinlunReviewsXiang" v-for="item, index in pinglunListsContent" :key="index">
								<!-- <div class="dingji">来自{{ item.addressName }}的顶级评论</div> -->
								<div class="gerenxinxi">
									<div><el-avatar :size="20" :src="circleUrl"></el-avatar></div>
									<div>{{ item.userName }}</div>
								</div>
								<div class="diyiXin"><el-rate v-model="item.score" disabled>
									</el-rate></div>
								<!-- <div class="zaiPinglun">{{ item.createTime }}在{{ item.addressName }}评论</div> -->
								<div class="zaiPinglun">{{ $t('goodsDet.what') }} {{ item.createTime }}
									{{ $t('goodsDet.comment') }}</div>
								<div class="pinglun">
									{{ item.content }}
								</div>
								<el-image class="imgUrl" v-for="(item1, index1) in item.img" :key="index1" :src="item1"
									:preview-src-list="item.img"></el-image>
								<!-- <div class="shangpXuan">
									<div>尺寸:{{ item.size }}</div>
									<el-divider direction="vertical"></el-divider>
									<div>颜色:{{ item.color }}</div>
									<el-divider direction="vertical"></el-divider>
									<div class="zitidaiyans">{{ item.start }}</div>
								</div> -->
								<!-- <div class="textPingLun">{{ item.txtReviwes }}</div> -->
							</div>
						</div>
						<div v-else>
							{{ $t('goodsDet.NoCommentsYet') }}
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="tong two">
				<div class="twoL">
					<div class="shop-wrap" v-if="goodsDetails.store">
						<div class="shop-wrap-top" style="">
							<div class="flex">
								<div class="avatar">
									<img :src="goodsDetails.store &&
										goodsDetails.store.logo
										? goodsDetails.store.logo
										: '~@/assets/img/head.png'
										" alt="" />
								</div>
								<div class="title margin-left">
									<div style="line-height: 30px">
										<span class="title-box">{{
											goodsDetails.store
												? goodsDetails.store.storeName
												: ""
										}}</span>
										<img @click="goChat" src="~@/assets/index/kefu.png" alt="" />
									</div>
									<div class="fensi">粉丝：{{ fensi }}</div>
								</div>
							</div>
							<div class="but" @click="goShop">进店看看</div>
						</div>
						<div class="shop-wrap-bottom" style="">
							<div>
								<div class="pingfen">综合评分</div>
								<div class="number orange">{{ pinfen }}</div>
							</div>
							<div>
								<div class="xiaoliang">卖家销量</div>
								<div class="number">{{ sale }}</div>
							</div>
							<div>
								<div class="fensi">粉丝数量</div>
								<div class="number">{{ fensi }}</div>
							</div>
						</div>
					</div>
					<div v-if="goodsDetails.store" style="width: 100%;height: 10px;background: #F5F5F5"></div>
					<div class="padding">
						<div class="twoTitle">热卖推荐</div>
						<goodsItem :isVip="relationId != 'null' && userId ? true : false" :data="dataList2"></goodsItem>
					</div>
				</div>
				<div class="twoR">
					<div class="div">
						<ul class="navgator">
							<li class="navgatorLi" :class="{ isActive: index == navgatorIndex }"
								@click="handleLeft(index)" v-for="(item, index) in navgator" :key="index">
								{{ item }}
							</li>
						</ul>
						<ul class="rightList">
							<div :id="'id' + index" v-for="(item, index) in listBox" :key="index">
								<div class="" v-if="index == 0">
									<div class="oneR">
										<img class="icon" src="../../assets/index/icon.png" />
										商品展示
									</div>
									{{goodsDetails.img}}
									<div class="oneC" v-html="goodsDetails.descrition"></div>
								</div>
								<div class="" v-if="index == 1">
									<div class="oneR">
										<img class="icon" src="../../assets/index/icon.png" />
										全部评论
									</div>
									<div class="oneC">
										<div class="pinglunList" v-for="(item2,
											index2) in pinglunLists.content" :key="index2">
											<div>
												<div class="plName">
													用户{{ item2.userName }}
												</div>
												<div class ="plName">颜色分类 : {{ item2.sku }}</div>
											</div>
											<div class="pinglun">
												{{ item2.content }}
											</div>
											<img src="../../../static/19.png" class="imgUrl" />
											<el-image class="imgUrl" v-for="(item1, index1) in item2.img" :key="index1"
												:src="item1" :preview-src-list="item2.img"></el-image>
											<div class="pinglunTime">
												{{ item2.createTime }}
											</div>
										</div>
									</div>
									<div class="three" v-if="pinglunLists.totalElements">
										<el-pagination background style="text-align: center;padding-bottom: 50px;"
											layout="prev, pager, next" :total="pinglunLists.totalElements"
											@current-change="handleCurrentChange" :current-page="page"
											:page-size="size">
										</el-pagination>
									</div>
								</div>
							</div>
						</ul>
					</div>
				</div>
			</div> -->
			<!-- 相似的品牌 -->
			<div class="xiangsiGOGOGO">
				<div class="PdBiaoti">{{ $t('goodsDet.SimilarBrands') }}</div>
				<div>{{ $t('goodsDet.more') }} <i class="el-icon-arrow-right"></i></div>
			</div>
			<!-- <goodsItem :isVip="relationId != 'null' && userId ? true : false" :data="dataList2"></goodsItem> -->
			<div class="wrap">
				<div class="xiangsiBox" v-for="(item, index) in dataList2" :key="index"
					@click="onClickGoSimilarBrands(item.id)">
					<div class="listBoxS">
						<img :src="item.coverImg" alt="" class="listBoxSImg">
					</div>
					<!-- 商品名称,商品价格 -->
					<div class="shoppbox">
						<div class="titleXiang">{{ $t('goodsDet.MonthlySales') }}: {{ item.sales }}</div>
						<div class="daZhuTi">{{ item.title }}</div>
						<!-- <div class="daZhuTi">Nike Dunk Low SP</div> -->
						<div class="footer">
							<div v-if="userId" class="price">{{ DollarSignValue }} {{ userId ?
								getProportion(item.memberPrice) : getProportion(item.price) }}</div>
							<div v-else class="price">{{ DollarSignValue }} {{ getProportion(item.price) }}</div>
							<!-- <div v-if="title != '拼团购'" class="num">月销: {{item.sales}}</div> -->
							<div v-if="title == '拼团购'" class="num">已拼成: {{ item.number }}</div>
						</div>
					</div>
					<!-- 收藏icon -->
					<div class="shoucang" @click="getCollect($event, item)">
						<span class="iconfont icon-shoucang guoqi" :class="getExist(item.id) ? '' : 'yishouc'"></span>
						<!-- <svg class="guoqi">
							<use xlink:href="#icon-shoucang"></use>
						</svg> -->
					</div>
				</div>
			</div>

			<!-- 底部 -->
			<Foots></Foots>
		</div>
	</div>
</template>

<script>
import Head from "@/components/head.vue";
import Foots from "@/components/foots.vue";
import goodsItem from "@/components/goods-item2";
import { regionData } from "element-china-area-data";
import tupian_1 from "../../assets/img/xie_1.jpg"
import tupian_2 from "../../assets/img/xie_2.jpg"
import tupian_3 from "../../assets/img/xie_3.jpg"
import lunbotu from "../../assets/img/lunbotu.jpg"
import lunbo_2 from "../../assets/img/lunbo_2.jpg"
import { currency } from '../js/currency'
import {
	Loading
} from 'element-ui';
export default {
	components: {
		Head,
		Foots,
		goodsItem
	},
	data() {
		return {
			circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
			checkList: [],
			page: 1,
			size: 10,
			goodsDetails: {
				sku: []
			},
			imgUrl: "",
			srcList: [],
			imgList: [],
			attrValue: [],
			checkString: "",
			checkStateList: [],
			numberMoney1: "",
			Maxnumber: 0,
			skuId: 0,
			attrValuecoverImg: "",
			relation: false,
			ggxz: false,
			number: 0,
			searchList: ["粽子", "防晒霜", "洗衣液", "蚊香液", "抽纸", "零食"],
			dataList2: [],
			options: regionData,
			storeAddre: "请选择城市",
			storeAddress: "",
			province: "", //省
			city: "", //市
			district: "", //区
			guigelist: ["100ml", "150ml", "200ml"],
			active1: 0,
			num: 1,
			active: 0,
			navgator: ["商品展示", "全部评论"],
			navgatorIndex: 0,
			listBox: ["A", "B"],
			listBoxState: true, //点击导航栏时，暂时停止监听页面滚动
			pinglunLists: {},
			goodsId: "",
			new_goodsId: "",
			carLists: [], //购物车
			relationId: window.localStorage.getItem("relationId"), //邀请码
			userId: this.$cookie.get("userId"), //用户id
			isCheck: true, //是否收藏
			shoucangId: "",
			shengji: "",
			money: "",
			maxMoney: "",
			title: "",
			storeId: "",
			pinfen: "0", //评分
			fensi: "0", //粉丝数量
			sale: "0",//销量
			reviewsValue: '4.7 ( 5 )',
			options: [{
				value: '选项1',
				label: '小'
			}, {
				value: '选项2',
				label: '中'
			}, {
				value: '选项3',
				label: '大'
			}, {
				value: '选项4',
				label: '超大'
			}],
			// value: '',
			value1: 4.7,
			value: 4.7,
			reviewsList: [{
				name: '张三',
				addressName: '成都',
				time: '2024年7月3日',
				size: '大',
				color: '白色',
				start: '已购买',
				txtReviwes: '耐用又舒适，物超所值!我会再买的!',
				valueReviews: 4,
			},],
			texts: ["超级差", '非常差', '一般', '非常好', '超级好'],
			lunboList: [{
				url: lunbotu
			}, {
				url: lunbo_2
			}],
			datatLIST: [{
				title: '在家睡大觉',
				price: 100.00,
				number: 10020,
				coverImg: tupian_1
			}, {
				title: '在家睡大觉',
				price: 100.00,
				number: 10020,
				coverImg: tupian_2
			}, {
				title: '在家睡大觉',
				price: 100.00,
				number: 10020,
				coverImg: tupian_3
			}],
			CollectList: [],
			selectList: {
				content: [],
			},
			userId: this.$cookie.get('userId'),
			GradeObj: {},
			goodsTypeName: '',
			goodsBrandName: '',
			pinglunListsContent: [],
			nickName: ''
		};
	},
	mounted() {
		this.title = this.$route.query.title;
		this.nickName = this.$cookie.get('nickName')
		this.getMaxMoney();
		this.remaiSelect();
		this.pinglunSelect();
		this.dataSelect();
		this.getGrade()
		if (this.userId) {
			this.isCheak();
			this.getCollectList()
		}
	},
	created() {
		// this.nickName = that.$cookie.get('nickName')
	},
	watch: {
		$route: {
			handler: function (val, oldVal) {
				this.new_goodsId = val.query.id;
				if (this.new_goodsId != this.goodsId) {
					this.dataSelect();
					this.pinglunSelect();
				}
			}
		}
	},
	computed: {
		discount() {
			// 调用方法，并返回计算结果
			return this.calculateDiscount();
		},
		DollarSignValue() {
			// let dollar=this.$store.state.currencyInfo.figure
			let dollar = this.getDollarSign()
			return dollar
		}
	},
	methods: {
		// 获取货币符号
		getDollarSign() {
			let dollar = this.$store.state.currencyInfo.figure
			return dollar
		},
		// 金额计算比例
		getProportion(money) {
			let proportion = this.$store.state.currencyInfo.scale
			let price = currency(proportion, money)
			return price
			// return money
		},
		// 获取每个评分等级所占的百分比
		getXing(xing) {
			let shu = 0
			if (xing > 0) {
				shu = ((xing / this.GradeObj.count) * 100).toFixed(2)
			} else {
				shu = 0
			}
			return parseFloat(shu)
		},
		goChat() {
			if (this.userId) {
				this.$http({
					url: this.$http.adornUrl("/chat/save"),
					method: "post",
					data: this.$http.adornData({
						storeHead: this.goodsDetails.logo,
						storeId: this.goodsDetails.storeId,
						storeName: this.goodsDetails.storeName,
						userId: this.$cookie.get("userId"),
						userName: this.$cookie.get("nickName")
					})
				}).then(({ data }) => {
					let returnData = data.data;
					this.$router.push({
						path: "/vueMchat?chatId=" + returnData.chatId
					});
				});
			} else {
				this.$router.push({
					path: "/login"
				});
			}
		},
		goShop() {
			this.$router.push({
				path:
					"/dianpu?storeId=" +
					this.storeId +
					"&storeName=" +
					this.goodsDetails.store.storeName
			});
		},
		//粉丝数量
		getCount() {
			this.$http({
				url: this.$http.adornUrl(
					"/self/store/count?storeId=" + this.storeId
				),
				method: "get",
				params: this.$http.adornParams({})
			}).then(({ data }) => {
				if (data.status == 0) {
					this.fensi =
						data.data.count1 > 10000
							? (data.data.count1 / 10000).toFixed(1) + "万"
							: data.data.count1;
				}
			});
		},
		//评分/销量
		getDianpuList() {
			this.$http({
				url: this.$http.adornUrl("/self/store/find?id=" + this.storeId),
				method: "get",
				params: this.$http.adornParams({
					goodsId: this.$route.query.id,
					userId: this.userId
				})
			}).then(({ data }) => {
				if (data.status == 0) {
					this.sale =
						data.data.sale > 10000
							? (data.data.sale / 10000).toFixed(1) + "万"
							: data.data.sale;
					this.pinfen = data.data.score;
				}
			});
		},
		//是否收藏
		isCheak() {
			this.$http({
				url: this.$http.adornUrl("/selfUserCollect/check"),
				method: "get",
				params: this.$http.adornParams({
					goodsId: this.$route.query.id,
					userId: this.userId
				})
			}).then(({ data }) => {
				if (data.status == 0) {
					this.isCheck = data.data;
					this.shoucangId = data.msg;
				}
			});
		},
		//保存浏览记录
		saveBrowse() {
			this.$http({
				url: this.$http.adornUrl("/selfUserBrowse/save"),
				method: "post",
				data: this.$http.adornData({
					goodsId: this.goodsDetails.id,
					coverImg: this.goodsDetails.coverImg,
					price: this.goodsDetails.price,
					title: this.goodsDetails.title,
					userId: this.userId
				})
			}).then(({ data }) => { });
		},
		//收藏商品
		setCheck() {
			if (this.userId) {
				if (this.isCheck) {
					this.$http({
						url: this.$http.adornUrl("/selfUserCollect/save"),
						method: "post",
						data: this.$http.adornData({
							goodsId: this.goodsDetails.id,
							coverImg: this.goodsDetails.coverImg,
							price: this.goodsDetails.price,
							title: this.goodsDetails.title,
							userId: this.userId
						})
					}).then(({ data }) => {
						if (data.status == 0) {
							this.isCheak();
						}
						console.log('收藏----data', data)
					});
				} else {
					this.$http({
						url: this.$http.adornUrl("/selfUserCollect/delete"),
						method: "get",
						params: this.$http.adornParams({
							id: this.shoucangId
						})
					}).then(({ data }) => {
						if (data.status == 0) {
							this.isCheak();
						}
					});
				}
			}
		},
		handleChange55(value) {
			value = this.$refs["cascaderAddr"].currentLabels;
			this.province = value[0];
			this.city = value[1];
			this.district = value[2];
			this.form.city = value[1];
			if (this.city == "市辖区") {
				this.city = this.province;
			}
			if (this.form.city == "市辖区") {
				this.city = this.province;
			}
		},
		handleChange(value) { },
		handleClick(index) {
			this.active = index;
		},
		imgBtn(url) {
			this.imgUrl = url;
			var arr = [];
			arr.push(url);
			this.srcList = arr;
		},
		handleCurrentChange(val) {
			this.page = val;
			this.pinglunSelect();
		},
		guigeBtn(item, index, ind) {
			//
			this.number = 1;
			this.attrValue[index].detail.forEach(d => {
				d.state = "";
			});

			this.checkStateList[index].name = item.name;
			this.attrValue[index].goodsId = index;
			this.attrValue[index].attrId = ind;
			this.attrValue[index].detail[ind].state = "123";
			this.checkString = "";
			this.checkStateList.forEach(d => {
				if (d.name) {
					if (this.checkString) {
						this.checkString = this.checkString + "," + d.name;
					} else {
						this.checkString = d.name;
					}
				}
			});
			for (var i = 0; i < this.goodsDetails.sku.length; i++) {
				let d = this.goodsDetails.sku[i];
				if (d.detailJson == this.checkString) {
					this.goodsDetails.memberPrice = d.memberPrice;
					this.goodsDetails.price = d.skuPrice;
					if (this.className === "pintuan") {
						if (d.pinkStock > 0) {
							this.numberMoney1 = d.pinkPrice;
							this.Maxnumber = d.pinkStock;
							this.skuId = d.id;
							this.attrValuecoverImg = d.skuImg;
						} else {
							this.Maxnumber = 0;
							this.$message("库存不足请选择其他的类型");
						}
					} else if (this.className === "miaosha") {
						if (d.secKillStock > 0) {
							this.numberMoney1 = d.secKillPrice;
							this.Maxnumber = d.secKillStock;
							this.skuId = d.id;
							this.attrValuecoverImg = d.skuImg;
						} else {
							this.Maxnumber = 0;
							this.$message("库存不足请选择其他的类型");
						}
					} else {
						if (d.stock > 0) {
							if (this.relation) {
								this.numberMoney1 = d.memberPrice;
							} else {
								this.numberMoney1 = d.skuPrice;
							}
							this.ggxz = true;
							this.Maxnumber = d.stock;
							this.skuId = d.id;
							this.attrValuecoverImg = d.skuImg;
						} else {
							this.Maxnumber = 0;
							this.$message("库存不足请选择其他的类型");
						}
					}
					break;
				} else {
				}
			}
		},
		// 购买
		onClick() {
			let userId = this.$cookie.get("userId");
			if (userId) {
				if (this.goodsDetails.attr.length > 0) {
					if (this.ggxz == false) {
						this.$message("请选择规格");
						return;
					}
				} else {
					this.checkString = "";
				}
				this.$router.push({
					path:
						"/placeOrder?id=" +
						this.goodsId +
						"&number=" +
						this.num +
						"&checkString=" +
						this.checkString
				});
			} else {
				this.$notify({
					title: "提示",
					message: "请先前往登录",
					type: "warning"
				});
			}
		},
		// 加购物车
		onCars() {
			let userId = this.$cookie.get("userId");
			let goodsId = this.$route.query.id;
			if (userId) {
				if (this.goodsDetails.attr.length > 0) {
					if (this.ggxz == false) {
						this.$message("请选择规格");
						return;
					}
				}
				this.$http({
					url: this.$http.adornUrl("/selfCart/save"),
					method: "post",
					data: this.$http.adornData({
						goodsId: goodsId,
						number: this.num,
						skuId: this.skuId
							? this.skuId
							: this.goodsDetails.sku[0].id,
						userId: userId
					})
				}).then(({ data }) => {
					if (data.status == 0) {
						this.skuId = "";
						this.num = 0;
						this.$message({
							showClose: true,
							message: "添加成功",
							type: "success"
						});
						this.carList();
						this.$refs.HeadGouWyChe.getShoppingCar()
					}
				});
			} else {
				this.$notify({
					title: "提示",
					message: "请先前往登录",
					type: "warning"
				});
			}
		},
		// 获取购物车数据
		carList() {
			let userId = this.$cookie.get("userId");
			this.$http({
				url: this.$http.adornUrl("/selfCart/list"),
				method: "get",
				params: this.$http.adornParams({
					page: 1,
					size: 100,
					userId: userId
				})
			}).then(({ data }) => {
				this.carLists = data.data.number;
			});
		},
		// 点击导航菜单，页面滚动到指定位置
		handleLeft(index) {
			this.navgatorIndex = index;

			this.$el.querySelector(`#id${index}`).scrollIntoView({
				behavior: "smooth", // 平滑过渡
				block: "start" // 上边框与视窗顶部平齐。默认值
			});
			this.listBoxState = false;

			let timeId;
			clearTimeout(timeId);
			timeId = setTimeout(() => {
				this.listBoxState = true;
			}, 200);
		},
		// 监听页面元素滚动，改变导航栏选中
		scrollToTop() {
			// 获取视窗高度
			var domHight = document.body.offsetHeight;
			// dom滚动位置
			var scrollTop =
				window.pageYOffset ||
				document.documentElement.scrollTop ||
				document.body.scrollTop;
			if (this.listBoxState) {
				//作用是点击导航栏时，延迟这里执行。
				this.listBox.map((v, i) => {
					// 获取监听元素距离视窗顶部距离
					var offsetTop = document.getElementById(`id${i}`).offsetTop;
					// 获取监听元素本身高度
					var scrollHeight = document.getElementById(`id${i}`)
						.scrollHeight;

					// 如果 dom滚动位置 >= 元素距离视窗距离 && dom滚动位置 <= 元素距离视窗距离+元素本身高度
					// 则表示页面已经滚动到可视区了。
					if (
						scrollTop >= offsetTop &&
						scrollTop <= offsetTop + scrollHeight
					) {
						// 导航栏背景色选中
						this.navgatorIndex = i;
					}
				});
			}
		},
		getMaxMoney() {
			this.$http({
				url: this.$http.adornUrl("/common/type/41"),
				method: "get",
				params: this.$http.adornParams({})
			}).then(({ data }) => {
				if (data.status == 0) {
					this.maxMoney = data.data.value;
				}
			});
		},
		// 获取商品详情
		dataSelect() {
			let goodsId = this.$route.query.id;
			this.goodsId = goodsId;
			this.$http({
				url: this.$http.adornUrl("/goods/find"),
				method: "get",
				params: this.$http.adornParams({
					id: goodsId
				})
			}).then(({ data }) => {
				this.goodsDetails = data.data;
				this.goodsDetails.img = this.goodsDetails.img.split(",");
				this.imgUrl = this.goodsDetails.img[0];
				this.srcList = this.goodsDetails.img;
				this.goodsTypeName = this.goodsDetails.type.name
				this.goodsBrandName = this.goodsDetails.brand.names
				this.saveBrowse();

				this.storeId = data.data.storeId;
				if (data.data.storeId) {
					this.getCount();
					this.getDianpuList();
				}

				if (this.goodsDetails.attr) {
					if (this.goodsDetails.attr.length > 0) {
						this.attrValue = [];
						if (this.userId) {
							this.shengji = (
								parseFloat(data.data.memberPrice) *
								parseFloat(data.data.commissionPrice) *
								parseFloat(this.maxMoney)
							).toFixed(2);
						} else {
							this.shengji = (
								parseFloat(data.data.price) *
								parseFloat(data.data.commissionPrice) *
								parseFloat(this.maxMoney)
							).toFixed(2);
						}
						console.log(data.data);
						this.goodsDetails.attr[0].attrValue.forEach(d => {
							let data = {
								name: ""
							};
							this.checkStateList.push(data);
							let detail = [];
							d.detail.split(",").forEach(d => {
								let data = {
									name: "",
									state: ""
								};
								data.name = d;
								detail.push(data);
							});
							d.detail = detail;
							d.attrId = "";
							d.goodsId = "";
							this.attrValue.push(d);
						});
						this.attrValue = this.goodsDetails.attr[0].attrValue;
					}
				}
			});
		},
		// 获取商品数据
		pinglunSelect() {
			let goodsId = this.$route.query.id;
			this.$http({
				url: this.$http.adornUrl("/selfGoodsComment/list"),
				method: "get",
				params: this.$http.adornParams({
					page: this.page - 1,
					size: 100,
					scoreType: 0,
					goodsId: goodsId
				})
			}).then(({ data }) => {
				this.pinglunLists = data.data;
				console.log('this.pinglunLists----111', this.pinglunLists)
				for (var i in this.pinglunLists.content) {
					this.pinglunLists.content[
						i
					].img = this.pinglunLists.content[i].img.split(",");
				}
			});
		},
		// 获取商品评论数据
		getGrade() {
			let goodsId = this.$route.query.id;
			let data = {
				goodsId: goodsId
			}
			this.$http({
				url: this.$http.adornUrl("/selfGoodsComment/count"),
				method: "get",
				params: this.$http.adornParams(data)
			}).then(res => {
				if (res.data.status == 0) {
					this.GradeObj = res.data.data
					this.GradeObj.count1 = Number(this.GradeObj.count1)
				}
			})
		},
		// 热卖推荐
		remaiSelect() {
			let goodsId = this.$route.query.id;
			this.$http({
				url: this.$http.adornUrl("/goods/selling"),
				method: "get",
				params: this.$http.adornParams({
					page: 0,
					size: 5,
					sort: "createAt"
				})
			}).then(({ data }) => {
				this.dataList2 = data.data.content;
				let list = data.data.content;
				console.log(this.dataList2, 'asadasd----')
			});
		},
		//计算打折率
		calculateDiscount() {
			let lvTxt = '0%'
			let lvNum = 0
			console.log('this.userId', this.userId)
			console.log('this.goodsDetails.originalPric', (this.goodsDetails.originalPrice - this.goodsDetails.memberPrice) / this.goodsDetails.originalPrice * 100)
			console.log('this.goodsDetails.memberPrice', this.goodsDetails.memberPrice)
			console.log('this.goodsDetails.price', this.goodsDetails.price)
			if (this.title != '拼团购') {
				if (this.userId) {
					lvNum = (this.goodsDetails.originalPrice - this.goodsDetails.memberPrice) / this.goodsDetails.originalPrice * 100
					lvNum = Math.round(lvNum); // 返回数值 3.14
					console.log('lvNum---3', lvNum)

				} else {
					lvNum = (this.goodsDetails.originalPrice - this.goodsDetails.price) / this.goodsDetails.originalPrice * 100
					console.log('lvNum---2', lvNum)

				}
			} else {
				lvNum = (this.goodsDetails.originalPrice - this.goodsDetails.memberPrice) / this.goodsDetails.originalPrice * 100
				console.log('lvNum---1', lvNum)
			}
			console.log('lvNum', lvNum)
			lvTxt = lvNum + '%'
			return lvTxt
		},
		// 前往相似的品牌
		onClickGoSimilarBrands(id) {
			this.$router.push({
				path: '/goodsDet?id=' + id + '&title='
			})
			// this.$router.replace({
			// 	query: {
			// 		...this.$route.query, // 保留当前的查询参数
			// 		id: id, // 更新id查询参数
			// 		title: '', // 更新title查询参数
			// 	},
			// }).catch(err => {
			// 	if (err.name !== 'NavigationDuplicated') {
			// 		throw err;
			// 	}
			// })
		},
		getCollect(event, obj) {
			event.stopPropagation();
			var weizhiIndex = -1
			const yesNo = this.CollectList.some((item, index) => {
				if (item.id == obj.id) {
					weizhiIndex = index
					return true
				}
			})
			if (yesNo) {
				this.setCkeckXiangSi(obj, 1, this.CollectList[weizhiIndex].shoucangId)
			} else {
				this.setCkeckXiangSi(obj, 0, -1)
			}
		},
		getExist(itemId) {
			let aaaList = []
			const yesNo = this.CollectList.some((item, index) => {
				if (item.id == itemId) {
					aaaList.push(itemId)
					return true
				}
			})
			console.log()
			return !yesNo
			// return this.CollectList.some((item) => item.id == itemId);
		},
		//获取收藏数据列表
		getCollectList() {
			let loadingInstance = Loading.service({
				lock: true,
				text: '加载中……',
				background: 'rgba(0, 0, 0, 0.7)'
			});

			this.$http({
				url: this.$http.adornUrl('/selfUserCollect/list'),
				method: 'get',
				params: this.$http.adornParams({
					'page': this.page - 1,
					'size': 999,
					'userId': this.userId,
				})
			}).then(({
				data
			}) => {
				this.$nextTick(() => {
					loadingInstance.close();
				})
				if (data && data.status === 0) {
					let returnData = data.data
					let dataLsit = []
					this.CollectList = []
					returnData.content.forEach(res => {
						if (res.goods) {
							dataLsit.push(res)
							// 执行后续操作
							this.CollectList.push({
								id: res.goodsId,
								shoucangId: res.id
							})
						}
					})
					this.selectList.content = dataLsit
				}
			})
		},
		// 相似的商品收藏
		setCkeckXiangSi(objItem, num, shoucangId) {
			if (this.userId) {
				if (!num) {
					this.$http({
						url: this.$http.adornUrl("/selfUserCollect/save"),
						method: "post",
						data: this.$http.adornData({
							goodsId: objItem.id,
							coverImg: objItem.coverImg,
							price: objItem.price,
							title: objItem.title,
							userId: this.userId
						})
					}).then(({ data }) => {
						if (data.status == 0) {
							this.isCheak();
							this.getCollectList()
						}
					});
				} else {
					this.$http({
						url: this.$http.adornUrl("/selfUserCollect/delete"),
						method: "get",
						params: this.$http.adornParams({
							id: shoucangId
						})
					}).then(({ data }) => {
						if (data.status == 0) {
							this.isCheak();
							this.getCollectList()
							// console.log('删除收藏----data', data)
						}
					}).catch((err => {
						this.getCollectList()
					}));
				}
			}
		},


	}
};
</script>

<style scoped>
.flex {
	display: flex;
}

.margin-left {
	margin-left: 20px;
}

.padding {
	padding: 15px;
}

.shop-wrap {
	padding: 15px;
}

.shop-wrap-top {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.avatar img {
	width: 46px;
	height: 46px;
	border-radius: 50%;
}

.title-box {
	color: #333333;
	font-size: 18px;
	font-weight: 600;
}

.fensi {
	color: #999999;
	font-size: 14px;
}

.title img {
	width: 26px;
	height: 24px;
}

.but {
	width: 74px;
	height: 28px;
	color: #fff;
	text-align: center;
	line-height: 28px;
	font-size: 14px;
	font-weight: 700;
	background: #ff2d55;
	border-radius: 14px;
}

.shop-wrap-bottom {
	width: 100%;
	display: flex;
	justify-content: space-between;
	text-align: center;
	padding-bottom: 10px;
}

.pingfen,
.xiaoliang,
.fensi {
	color: #999999;
	font-size: 14px;
}

.number {
	font-size: 20px;
	font-weight: 800;
	color: #ff2d55;
}

.orange {
	color: #ffa42d;
}

.div1 {
	height: 100vh;
	/* min-height: 100vh; */
	overflow-x: hidden;
	/* background: #fff; */
}

.beijBox {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	background: #fff;
}

.daohang {
	width: 100%;
	padding-left: 120px;
	margin: 0 auto;
	overflow: hidden;
	height: 65px;
	line-height: 65px;
	font-size: 18px;
	font-weight: 400;
	background: #F9F9F9;
	box-sizing: border-box;
	object-fit: contain;
}

.pailie {
	display: flex;
	background: #fff;
	width: 1200px;
	/* padding-left: 83px; */
	box-sizing: border-box;
	margin: 0 auto;
	/* margin-left: 83px; */
}

.centerBoxShang {
	/* width: 550px; */
	width: 754px;
	margin-left: 48px;
	background: #fff;
}

.pinpai {
	font-size: 18px;
	line-height: 18px;
	color: #0578E4;
	padding-top: 10px;
}

.pinpaiName {
	font-size: 28px;
	font-weight: 700;
	color: #000;
	padding-top: 3px;
}

.pinjiaBox {
	display: flex;
}

.pingfen {
	font-size: 18px;
	font-weight: 700;
	display: flex;
	color: #000;
	padding-right: 71px;
}

.xiala {
	display: inline-block !important;
	width: 20px !important;
	height: 20px !important;
	border: 1px dashed #333333;
	text-align: center;
	line-height: 20px;
}

.GoodPin {
	font-size: 14px;
	font-weight: 600;
}

.xiaoliang {
	padding-top: 6px;
	color: #000;
	font-size: 12px;
}

.huixianBox {
	width: 400px;
	height: 2px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 7px;
	padding-bottom: 6px;
}

.huixian {
	height: 1px;
	width: 80%;
	background: #3d3d3d;
}

.jiageBox {}

.qian {
	font-size: 48px;
	font-weight: 700;
	font-family: Montserrat, Montserrat;
}

.bizhong {
	font-size: 18px;
	color: #000;
}

/* 删除线 */
.shanchuXian {
	text-decoration: line-through;
	color: #848484;
	margin-left: 11px;
	margin-right: 13px;
}

.jiangjialv {
	display: inline-block;
	text-align: center;
	width: 75px;
	height: 31px;
	background: #EA7408;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	border-radius: 8px;
	line-height: 31px;
}

/* 设置el-select的下拉箭头高度 */
/deep/.el-select .el-input__suffix .el-input__suffix-inner .el-input__icon {
	line-height: 23px !important;
}

.sizeBox {
	height: 23px;
	display: flex;
	/* justify-content: center; */
	align-items: center;
	margin-top: 15px;
}

/deep/.el-select .el-input .el-input__inner {
	width: 109px !important;
	height: 23px !important;
	border-radius: 38px !important;
	line-height: 23px !important;
}

/deep/.el-select__caret {
	height: 23px !important;
	line-height: 23px !important;
}

.yanse {
	margin-top: 15px;
	margin-bottom: 6px;
}

.yanseBoxFang {
	padding-left: 42px;
	display: flex;
}

.fang {
	width: 27px;
	height: 27px;
	border-radius: 5px;
	margin-right: 15px;
	box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.07);
}

.baiseFang {
	background: #fff;
	border: 1px solid #D0D0D0;

}

.luseFang {
	background: green;
	border: 1px solid #000;
}

.hongseFang {
	background: #EA4444;
	border: 1px solid #EA4444;
}

.numBox {
	display: flex;
	align-items: center;
	margin-top: 18px;
}

/deep/.el-input-number .el-input-number__increase {
	background: #000;
	/* 增加按钮颜色 */
	color: #fff;
	border-radius: 0 !important;
	border-top-right-radius: 5px !important;
	border-bottom-right-radius: 5px !important;
	font-size: 17px;
}

/deep/.el-input-number .el-input-number__decrease {
	background: #000;
	/* 减少按钮颜色 */
	color: #fff;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	font-size: 17px;
}

/* 展示商品是否有货 */
.ItYouHuoBox {
	height: 100px;
	display: flex;
	margin-top: 20px;
}

.youhuoBox {
	width: 197px;
	height: 75px;
	position: relative;
	padding-top: 21px;
	margin-right: 30px;

}

.touYou {
	border: 1px solid #EA7408;
	border-bottom: none;
	width: 86px;
	height: 25px;
	border-radius: 9px 9px 0 0;
	font-size: 12px;
	font-weight: 700;
	color: #EA7408;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 7px;
	top: -3px;
}

.youhuoShnag {
	width: 197px;
	height: 75px;
	border: 2px solid #EA7408;
	border-radius: 11px;
	display: flex;
	background: #F5F5F5;
}

/* 需订货样式 */
.huise {
	border: 1px dashed #3d3d3d;
	/* border: none; */
}

.huiseKuang {
	border: 1px solid #666666;
	color: #666666;
	border-bottom: none;
}

.zuoImage {
	width: 57px;
	height: 51px;
	padding: 12px 4px 12px 12px;
}

.shangImage {
	width: 100%;
	height: 100%;
}

.youImage {
	/* display: flex; */
	font-size: 12px;
}

.shangName {
	height: 34px;
	line-height: 34px;
	padding-top: 9px;
}

.rightBox {
	width: 234px;
	/* background: #0578E4; */
	height: 490px;
	border: 1px dashed #3d3d3d;
	box-shadow: 1px 1px 3px 5px #D0D0D0;
}

.zongjin {
	padding: 9px 0 14px 14px;
	font-size: 14px;
	font-weight: 700;
	color: #000;
}

.juzhong {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* justify-content: center; */
	/* align-items: center; */
}

.wangsgang {
	padding-bottom: 10px;
}

.dizhi1Box {
	display: flex;
	justify-content: center !important;
	align-items: center !important;
	margin-top: 15px;
	margin-bottom: 15px;
}

.dizhi {
	width: 132px;
	height: 23px;
	background: rgba(206, 206, 206, .66);
	text-align: center;
	line-height: 23px;
	border-radius: 38px;
}

.huibeijin {
	width: 202px;
	height: 191px;
	background: #EBEBEB;
	margin: 0 auto;
	border: 1px dashed #3d3d3d;
	padding: 8px 12px 12px 12px;
	box-sizing: border-box;
}

.shuishouText {
	width: 100%;
	display: flex;
	height: 24px;
	/* justify-content: center; */
	align-items: center;
	margin-bottom: 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.shuishouText div:nth-child(2) {
	width: 86px;
	height: 23px;
	background: #f8f8f8;
	line-height: 23px;
	text-align: center;
	font-size: 12px;
	border-radius: 23px;
}

.shuiTxt {
	font-size: 14px;
	font-weight: 700;
	color: #000;
}

.shuifei {
	font-size: 12px;
	color: #343434;
	font-weight: 500;
}

.zitiLan {
	color: #0578E4;
}

.xiahuaX {
	text-decoration: underline;
}

.maginTop27 {
	margin-top: 27px;
}

.btnMai {
	width: 202px;
	height: 36px;
	border-radius: 36px;
	text-align: center;
	line-height: 36px;
	/* background: aqua; */
	margin: 0 auto;
	margin-top: 12px;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
}

.btnMai:hover {
	cursor: pointer;
}

.btnColorChen {
	background: #EA7408;
}

.btnColorChen:hover {
	background: rgba(234, 116, 8, 0.6);
}

.btnColorHei {
	background: #343434;
}

.btnColorHei:hover {
	background: rgba(52, 52, 52, 0.6);
}

/* 产品详情 */
.ProductDetailsBox {
	width: 1200px;
	/* height: 735px; */
	background: #FAFAFA;
	margin: 79px auto 0 auto;
	padding: 28px 90px 20px 90px;
	box-sizing: border-box;
	position: relative;
}

.PdBiaoti {
	/* width: 179px; */
	height: 67px;
	font-size: 24px;
	font-weight: 700;
	line-height: 67px;
	text-align: center;
	margin: 0 auto 18px auto;
}

.xiangQing {
	width: 915px;
	height: 560px;
	/* background: aqua; */
	margin: 0 auto;

}

.xiangQing p:nth-child(1) {
	/* background: #0578E4; */
	margin-bottom: 40px;
}

.xiangQing p {
	font-size: 26px;
	font-weight: 500;
	color: #333333;
	letter-spacing: 5px;
}

.xialaGenDuo {
	width: 24px;
	height: 24px;
	/* background: aqua; */
	position: absolute;
	/* top: 50%; */
	bottom: 20px;
	left: 50%;
	transform: translate(0 50%);
	line-height: 24px;
	text-align: center;
	font-size: 24px;
	font-weight: 900;
}

/* 评论 */
.reviewsBox {
	width: 1095px;
	height: 662px;
	margin: 33px auto 0 auto;
}

.reviewsDetailsBox {
	width: 100%;
	height: 577px;
	display: flex;
}

.shujuBoxLeft {
	width: 350px;
	height: 100%;
	margin-right: 28px;
	/* background: paleturquoise; */
}



.cardBox {
	width: 350px;
	height: 193px;
	padding: 15px 20px;
	box-sizing: border-box;
	border-radius: 10px;
	background: linear-gradient(to bottom, rgba(219, 219, 219, .15) 0%, rgba(219, 219, 219, 1) 100%);
}

.cardTop {
	width: 100%;
	display: flex;
	/* justify-content: space-between; */
	align-items: center;
}

.cardCircularIcon {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #fff;
	margin-right: 10px;
}

.logoTxt {
	font-size: 20px;
	font-weight: 700;
	width: 110px;
	height: 67px;
	line-height: 67px;
	margin-right: 34px;
}

.enterBtn {
	width: 103px;
	height: 34px;
	background: #000;
	border-radius: 50px;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	font-weight: 700;
	padding-left: 25px;
	box-sizing: border-box;
}

.enterBtn i {
	font-size: 26px;
	font-weight: 500;
	margin-left: 5px;
}

.enterBtn:hover {
	cursor: pointer;
	background: rgba(234, 116, 8, 0.87);
}

.cardHuixian {
	height: 1px;
	width: 310px;
	margin: 0 auto;
	background: #D8D8D8;
}

.shujuliang {
	width: 100%;
	height: 87px;
	display: flex;
}

.shujuliang .lieOne {
	width: 31%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* 评分部分  */
.reviewsNumberBox {
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
}

.pingTxt {
	font-size: 24px;
	font-weight: 700;
	margin-top: 15px;
}

.dafenBoxXing {
	display: flex;
	align-items: center;
	line-height: 30px;
	height: 30px;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 15px;
}

/deep/.dafenBoxXing .el-rate span {
	line-height: 30px;
	height: 30px;
	/* display: flex; */
	/* justify-content: center; */
	/* align-items: center; */
}

.dafenBoxXing .el-rate {
	line-height: 30px;
	height: 30px;
}

/deep/.dafenBoxXing .el-rate .el-rate__text {
	line-height: 30px;
	height: 30px;
	color: #000 !important;
	font-size: 18px;
	font-weight: 700;
}

/deep/.dafenBoxXing .el-rate .el-rate__icon {
	font-size: 30px;
}

.xingF {
	padding-top: 5px;
	box-sizing: border-box;
}

.Quanguo {
	color: #999;
	font-weight: 600;
	margin-bottom: 25px;
}

.xingshu {
	display: flex;
	margin-bottom: 15px;
	width: 320px;
}

.xingshu div {
	margin-right: 10px;
	color: #1997eb;
}

/deep/.el-progress {
	width: (100%-28px);
	display: flex;
	justify-content: space-between;
}

/deep/.el-progress .el-progress-bar {
	/* padding: 0; */
}

/deep/.el-progress .el-progress-bar .el-progress-bar__outer {
	width: 220px;
	border-radius: 5px;
	height: 30px !important;
}

/deep/.el-progress .el-progress-bar .el-progress-bar__inner {
	border-radius: 0;
}

/deep/.el-progress {
	display: flex;
}

/deep/.el-progress .el-progress__text {
	font-size: 16px !important;
	height: 30px !important;
	line-height: 30px;
	font-weight: 600;
	color: #1997eb;
	text-align: end !important;
	width: 35px;
}

/* 顾客评论 */
.shujuBoxRight {
	height: 100%;
	width: 722px;
	overflow: auto;
	/* background: aquamarine; */
	padding: 16px;
	box-sizing: border-box;
}

.ReviewsSay {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 15px;
}

.zongjieReviews {
	font-size: 16px;
	/* font-weight: 600; */
	margin-bottom: 5px;
}

.tishiReviews {
	font-size: 14px;
	color: #848484;
}

.shaixuanReviews {
	margin: 10px 0;
	font-size: 18px;
	font-weight: 700;
}

/* 多选框 */
.el-checkbox-group {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.el-checkbox {
	margin-right: 10px;
}

.el-checkbox__input {
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

/* 设置多选框的大小 */
/deep/.el-checkbox-group .el-checkbox .el-checkbox__input .el-checkbox__inner {
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

/* 设置多选框选中状态下的背景颜色 */
/deep/.el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
	height: 20px;
	width: 20px;
	text-align: center;
	line-height: 20px;
	background: #377b63;
	border-color: #377b63;
}

/* 设置多选框取消选中状态下的边框颜色 */
/deep/.el-checkbox .el-checkbox__input.is-focus .el-checkbox__inner {
	border-color: #DCDFE6;
	line-height: 20px;
	height: 20px;
	width: 20px;
}

/* 设置多选框的选中状态下的字体颜色 */
/deep/.el-checkbox .el-checkbox__input.is-checked+.el-checkbox__label {
	color: #000;
}

/* 设置多选框选中状态中的'打勾'图标的位置和大小 */
/deep/.el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner::after {
	left: 6px !important;
	top: 2px !important;
	height: 10px;
	width: 4px;
}

/deep/.el-checkbox .el-checkbox__input .el-checkbox__label {
	color: #000 !important;
}

.duoxuanBox .el-divider--vertical {
	height: 30px;
	width: 2px;
}

.pinglunImageBox {
	margin-top: 30px;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.pinglunImageBox div:nth-child(1) {
	font-size: 20px;
	font-weight: 700;
}

.pinglunImageBox div:nth-child(2) {
	color: #367386;
	font-weight: 700;
}

.pinglunImageBox div:nth-child(2):hover {
	cursor: pointer;
}

.lunboImage {
	width: 480px;
	/* padding-left: 20px; */
	margin: 0 90px;
	box-sizing: border-box;
	background: cadetblue;
	position: relative;
	/* display: flex;
	justify-content: center;
	align-items: center; */
	/* margin-left: 86px; */

}

/deep/.el-carousel .el-carousel__container {
	height: 140px;
	width: 100%;
}

.el-carousel__item {
	width: 100%;
	height: 140px;
	background: #0578E4;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

/* /deep/.el-carousel .el-carousel__container .el-carousel__arrow {
	background: rebeccapurple;
} */

/deep/.el-carousel .el-carousel__container .el-carousel__arrow--left {
	/* left: -200px; */
}

.lunboXianBox0 {
	width: 100%;
	height: 140px;
	background: darkcyan;
}

.lunboXianBox1 {
	width: 100%;
	height: 140px;
	background: aliceblue;
}

.lunboXianBox2 {
	width: 100%;
	height: 140px;
	background: darkgoldenrod;
}

.lunboXianBox3 {
	width: 100%;
	height: 140px;
	background: fuchsia;
}

.pinlunPeopleBox {
	padding: 0 16px;
	box-sizing: border-box;
}

.pinlunReviewsXiang {
	width: 542px;
	/* height: 150px; */
	/* padding: 10px; */
	margin: 10px;
	box-sizing: border-box;
	margin-bottom: 20px;
}

.dingji {
	/* margin-top: 10px; */
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 10px;
}

.gerenxinxi {
	display: flex;
	align-items: center;
}

.gerenxinxi div:nth-child(1) {
	margin-right: 25px;
	display: flex;
	align-items: center;
}

.gerenxinxi div:nth-child(2) {
	margin-right: 25px;
	font-size: 12px;
}

/deep/.diyiXin .el-rate .el-rate__text {
	line-height: 30px;
	height: 30px;
	color: #000 !important;
	font-size: 12px;
	font-weight: 700;
}

.zaiPinglun {
	font-size: 12px;
	margin-top: 5px;
}

.shangpXuan {
	font-size: 12px;
	display: flex;
	color: #666666;
	margin-bottom: 5px;
}

.shangpXuan .el-divider {
	margin-right: 10px;
	line-height: 15px;
}

.zitidaiyans {
	color: #EA7408;
	font-weight: 700;
}

.textPingLun {
	font-size: 12px;
}

/* 相似的品牌 */
.xiangsiGOGOGO {
	display: flex;
	align-items: center;
}

.xiangsiGOGOGO div:nth-child(2) {
	margin-right: 135px;
	height: 35px;
	width: 86px;
	background: #c2c2c2;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	border-radius: 35px;
	padding-left: 10px;
	box-sizing: border-box;
}

/deep/.xiangsiGOGOGO div:nth-child(2) i {
	padding-top: 5px;
	margin-left: 10px
}

.xiangsiGOGOGO div:nth-child(2):hover {
	cursor: pointer;
	font-weight: 700;
	background: #ffa42d;
}

.wrap {
	display: grid;
	width: 1170px;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 3px;
	margin: 0 auto;
	justify-content: space-between;
}

.wrap>>>.box {
	width: 280px !important;
	height: 333px;
	/* height: 320px; */
	/* padding: 20px; */
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #F6F5F7;
	box-sizing: border-box;
	margin-bottom: 20px;
	border-radius: 20px;
	position: relative;
	/* background: forestgreen; */
	overflow: hidden;
	box-shadow: 1px 0px 3px 3px #DCDFE6;
}

.wrap>>>.box>>>img {
	width: 100%;
	height: 280px !important;
	overflow: hidden;
}

/deep/.wrap .box img {}

.xiangsiBox {
	width: 280px !important;
	background: #fff !important;
	/* border: 1px solid #F6F5F7 !important; */
	box-sizing: border-box !important;
	margin-bottom: 20px !important;
	border-radius: 20px !important;
	position: relative !important;
	/* background: forestgreen; */
	overflow: hidden !important;
	box-shadow: 1px 0px 3px 3px #DCDFE6 !important;

}

.listBoxS {
	width: 100%;
	height: 280px;
	overflow: hidden;
	/* border-top-left-radius: 20px;
	border-top-right-radius: 20px; */
	/* background: #0578E4; */
}

.listBoxSImg {
	width: 100%;
	height: 280px;
	overflow: hidden;
	object-fit: cover;
}

.shoucang {
	content: '';
	width: 50px !important;
	height: 50px !important;
	background: #fff !important;
	border-radius: 50% !important;
	position: absolute !important;
	top: 235px;
	right: 19px;
}

.guoqi {
	/* width: 50px !important;
	height: 50px !important; */
	font-size: 50px;
	z-index: 10;
}

.shoucang .guoqi:hover {
	cursor: pointer;
}

.shoppbox {
	height: 180px;
	padding: 10px 5px 10px 14px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.yishouc {
	color: #EA7408;
}

.shoucang:hover .yishouc {
	color: rgba(234, 116, 8, .5);
}

.titleXiang {
	/* display: -webkit-box; */
	/* -webkit-line-clamp: 2;
		-webkit-box-orient: vertical; */
	/* overflow: hidden; */
	/* padding-top: 10px; */
	/* padding-left: 14px; */
	font-size: 24px;
	font-weight: 400;
	color: #3F3F3F;
	width: 177px;
	height: 34px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.daZhuTi {
	/* width: 203px; */
	/* height: 34px; */
	font-size: 24px;
	font-weight: 700;
	color: #000;
	/* padding-left: 14px; */
	/* margin-top: 21px; */
	/* white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; */
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	/* 显示的行数，可以根据需要修改 */
}

.footer {
	display: flex;
	justify-content: space-between;
	margin-top: 18px;
}

.price {
	font-weight: 400;
	/* color: #ff2d55; */
	height: 34px;
	font-size: 24px;
	padding-left: 14px;
	color: #000;
}

.num {
	font-size: 12px;
	color: #666666;
	font-weight: 400;
}

/*  */
.tong {
	width: 1200px;
	margin: 0 auto;
	margin-top: 30px;
	box-sizing: border-box;
	overflow: hidden;
}

.two {
	margin-bottom: 15px;
}

.one {
	padding: 20px;
	background: #fff;
	display: flex;
	justify-content: space-between;
}

/* .box {
	display: inline-block;
} */

.imgs {
	width: 340px;
	/* height: 340px; */
	/* display: flex; */
	/* align-items: center; */
}

.imgTopBox {
	width: 100%;
	height: 340px;
	display: flex;
	justify-content: center;
	align-content: center;
}


.imgTop {
	/* width: 100%; */
	height: 340px;
	/* padding: 10px; */
	box-sizing: border-box;
	object-fit: cover;
}

.imgList {
	width: 100%;
	height: 80px;
	margin-top: 10px;
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: 4;
	grid-template-rows: 1;
	grid-auto-columns: 80px;
	grid-gap: 6px;
}

.imgNameBox {
	width: 80px;
	height: 80px;
	/* background: #c2c2c2; */
}

.imgName {
	width: 80px;
	height: 80px;
	display: inline-block;
	/* padding: 5px; */
	box-sizing: border-box;
	object-fit: cover;
}

.oneRight {
	width: 68%;
}

.titleR {
	font-size: 18px;
	color: #333;
	font-weight: 600;
	line-height: 50px;
}

.moneyR {
	/* margin-top: 20px; */
	background: #ff2d55;
	height: 50px;
	line-height: 50px;
	color: #fff;
	padding: 0 20px;
	border-radius: 4px 4px 0 0;
	font-size: 14px;
}

.moneyR span {
	display: inline-block;
}

.leftR {
	font-size: 16px;
	width: 86px;
}

.xiao {
	font-size: 14px;
}

.xianjiaR {
	font-size: 21px;
	font-weight: 600;
}

.yuanjia {
	margin-left: 10px;
	text-decoration: line-through;
}

.guige {
	background: #f5f7fa;
	margin-top: 20px;
	border-radius: 4px;
	font-size: 12px;
	color: #666;
	padding: 15px;
}

.guigeT {
	display: inline-block;
	line-height: 40px;
}

.guigeL {
	width: 80px;
}

.guige2 {
	background: #fff;
	margin-top: 0;
}

.guigelist {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid #999;
	margin: 0 4px;
	background: #fff;
	height: 20px;
	line-height: 20px;
	cursor: pointer;
}

.active1 {
	color: #ffa42d;
	border: 1px solid #ffa42d;
}

.btns {
	padding: 0 20px;
}

.btns button {
	width: 180px;
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	border: 1px solid #ff2d55;
	margin-right: 20px;
}

.goumai {
	color: #ff2d55;
	background: #ffe5ea;
}

.jiagou {
	color: #fff;
	background: #ff2d55;
}

.twoL {
	width: 30%;
	float: left;
	background: #fff;
	/*padding: 15px;*/
	box-sizing: border-box;
}

.twoTitle {
	line-height: 40px;
	font-size: 18px;
	color: #333;
	font-weight: 600;
}

.twoR {
	/*margin-left: 31%;*/
	background: #fff;
	width: 69%;
	padding: 20px;
	box-sizing: border-box;
	float: right;
}

/*  */
.div {
	width: 100%;
}

.navgator {
	/* width: 200px; */
	position: relative;
	top: 0;
	border-bottom: 1px solid #efefef;
	line-height: 50px;
}

.navgatorLi {
	/* width: 20%; */
	/* height: 2rem;
		line-height: 2rem; */
	display: inline-block;
	justify-content: center;
	align-items: center;
	/* border: 1px solid #ccc; */
	border-top: none;
	margin: 0 20px;
	/* margin-bottom: 15px; */
	cursor: pointer;
}

.isActive {
	color: #ff2d55;
	border-bottom: 3px solid #ff2d55;
}

.rightList {
	margin-top: 15px;
}

.oneR {
	height: 50px;
	line-height: 50px;
	font-size: 20px;
	font-weight: 600;
}

.icon {
	width: 20px;
	height: 20px;
	margin-right: 10px;
}

.oneB {
	border: 1px solid #f2f2f2;

	color: #333;
	width: 100%;
	margin: 20px 0;
}

/* .oneB tr{
		width: 100%;
	} */
.td1 {
	border-right: 1px solid #f2f2f2;
	border-bottom: 1px solid #f2f2f2;
	width: 20%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
}

.td2 {
	border-bottom: 1px solid #f2f2f2;
	height: 40px;
	line-height: 40px;
	width: 32%;
	font-weight: 100;
	font-size: 12px;
	text-align: left;
	padding: 0 10px;
}

.td3 {
	width: 200px;
	font-weight: 100;
	font-size: 12px;
	text-align: left;
	padding: 0 10px;
}

.td4 {
	border-bottom: none;
}

.oneC {
	margin: 20px 0;
	width: 100%;
}

.pinglunList {
	margin: 10px 0;
	border-top: 1px solid #efefef;
	padding: 10px 0;
}

.plName {
	display: inline-block;
	margin-right: 30px;
	color: #999;
	font-size: 16px;
}

.pinglun {
	font-size: 18px;
	color: #333;
	margin: 10px 0;
}

.imgUrl {
	margin: 10px 10px 10px 0;
	width: 100px;
	height: 100px;
}

.pinglunTime {
	color: #999;
	font-size: 16px;
}

.oneC>>>img {
	max-width: 100%;
	/* width: 100%; */
}

.quMargin {
	margin-top: 0;
}

.qupadding {
	padding-top: 5px;
}
</style>
